<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>余额充值 - <?= $systemConfig['system_name'] ?? '' ?></title>
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/layui/layui.js"></script>
<style>*{margin:0;padding:0;box-sizing:border-box;}body{background:#f5f7fa;font-family:"Microsoft YaHei","PingFang SC",sans-serif;}
.header{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08);}.header .inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:60px;}
.header .logo{font-size:20px;font-weight:700;color:#1e3c72;text-decoration:none;}.header .nav{display:flex;gap:16px;}
.header .nav a{color:#555;text-decoration:none;font-size:14px;padding:8px 12px;border-radius:4px;}.header .nav a:hover,.header .nav a.active{color:#1e9fff;background:#f0f7ff;}
.container{max-width:900px;margin:0 auto;padding:20px;}.card{background:#fff;border-radius:8px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,.05);margin-bottom:20px;}
.card h3{font-size:17px;margin-bottom:14px;color:#333;padding-bottom:10px;border-bottom:1px solid #eee;}
.balance-box{text-align:center;padding:30px;background:linear-gradient(135deg,#1e3c72,#2a5298);border-radius:12px;color:#fff;margin-bottom:20px;}
.balance-box .label{font-size:14px;opacity:.8;}.balance-box .amount{font-size:40px;font-weight:700;margin:10px 0;}
.pay-option{padding:12px 16px;border:1px solid #e6e6e6;border-radius:6px;margin-bottom:10px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;}
.pay-option:hover{background:#f0f7ff;border-color:#1e9fff;}
.pay-option .info{}.pay-option .info .title{font-weight:600;color:#333;}.pay-option .info .hint{font-size:12px;color:#999;margin-top:2px;}
</style>
</head>
<body>
<div class="header"><div class="inner">
    <a href="/" class="logo"><?= $systemConfig['system_name'] ?? '' ?></a>
    <div class="nav"><a href="/user/index/dashboard">控制台</a><a href="/user/index/packages">套餐市场</a><a href="/user/index/myApps">我的应用</a><a href="/user/index/callStats">调用统计</a><a href="/user/index/myOrders">我的订单</a><a href="/user/index/myPackages">已购套餐</a><a href="/user/index/recharge" class="active">余额充值</a><a href="/user/index/apiDoc">接入文档</a><a href="/user/index/profile"><?= $userInfo['nickname'] ?? $userInfo['username'] ?></a><a href="/user/index/logout">退出</a></div>
</div></div>
<div class="container">
    <div class="balance-box">
        <div class="label">当前账户余额</div>
        <div class="amount">¥<?= number_format($balance, 2) ?></div>
    </div>
    <div class="card">
        <h3>在线充值</h3>
        <div class="layui-form" lay-filter="rechargeForm">
        <div class="layui-form-item"><label class="layui-form-label">充值金额</label><div class="layui-input-block"><input type="number" id="rechargeAmount" placeholder="请输入充值金额" class="layui-input" lay-verify="required|number" min="0.01" step="0.01" value=""></div></div>
        <div class="layui-form-item"><label class="layui-form-label">支付方式</label><div class="layui-input-block">
        <?php if(!empty($payChannels)): foreach($payChannels as $pc): ?>
        <div class="pay-option" onclick="doRecharge(<?= $pc['id'] ?>)"><div class="info"><div class="title"><?= $pc['name'] ?></div><div class="hint"><?= $pc['pay_type']=='alipay'?'支付宝':($pc['pay_type']=='wxpay'?'微信支付':$pc['pay_type']) ?></div></div><span style="color:#1e9fff;">立即充值 →</span></div>
        <?php endforeach; else: ?>
        <div style="text-align:center;padding:20px;color:#999;">暂无可用支付通道，请联系管理员</div>
        <?php endif; ?>
        </div></div>
        </div>
    </div>
    <?php if(!empty($rechargeRecords)): ?>
    <div class="card">
        <h3>充值记录</h3>
        <table class="layui-table" lay-size="sm">
            <thead><tr><th>金额</th><th>类型</th><th>备注</th><th>时间</th></tr></thead>
            <tbody>
                <?php foreach($rechargeRecords as $r): ?>
                <tr><td>¥<?= number_format($r['amount'], 2) ?></td><td><?= $r['type']=='manual'?'手动充值':($r['type']=='online'?'在线充值':'消费充值') ?></td><td><?= htmlspecialchars($r['remark'] ?: '-') ?></td><td><?= $r['create_time'] ?></td></tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php endif; ?>
</div>
<script>
function doRecharge(channelId){var amount=parseFloat($('#rechargeAmount').val());if(!amount||amount<=0){layer.msg('请输入充值金额');return;}location.href='/user/index/payRecharge?amount='+amount+'&pay_channel_id='+channelId;}
</script>
</body>
</html>